<template>
	<view>
		<div class="ul" v-for="time in list">
			<div class="li" >
				<div class="title">
					<div class="name">{{ time.title }}</div>
					<div class="money">{{ time.rewardAmount }}</div>
				</div>
				<div class="text">
          {{ time.remark }}
				</div>
				<div class="btn" @click="detriment(time.id)">购买</div>
			</div>
		</div>
	</view>
</template>

<script>
import jWeixin from "jweixin-module";
import Api from "../../API/api";
	export default {
		data() {
			return {
        list: []
			}
		},
    onLoad() {
    Api.getAgent().then(res=>{
      this.list = res.data
    })
    },
		methods: {
      detriment(id) {
        uni.showLoading({
          title: '加载中'
        });
        Api.wxPay(id).then(res => {
          jWeixin.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.paySign, // 必填，签名
            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
          });
          jWeixin.ready(() => {
            jWeixin.chooseWXPay({
              appId: res.data.appId, // 必填，公众号的唯一标识
              timestamp: res.data.timeStamp,
              nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
              package: res.data.packageVal, // 统一支付接口返回的prepay_id参数值
              signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: res.data.paySign, // 支付签名
              success: function(res) { //支付成功回调
                uni.hideLoading();
                console.log('支付成功')
                uni.showToast({
                  title: '支付成功',
                  icon: 'checkmarkempty'
                })
                // //成功后跳转到订单页
                setTimeout(function() {
                  uni.redirectTo({
                    url: '/pages/index/index'
                  });
                }, 2000)
              },
              cancel: function(res) {
                uni.hideLoading();
                uni.showToast({
                  title: '取消支付',
                  icon: 'none',
                  duration: 2000,
                })
                Api.closeOrder().then(res=>{
                  // alert(JSON.stringify(res.data))
                })
                // alert('取消支付')
              },
              fail: function(res) {
                uni.hideLoading();
                console.log("fail", res);
                uni.showToast({
                  title: '支付失败',
                  icon: 'none',
                  duration: 2000,
                })
              }
            });
          });
        });
      }

		}
	}
</script>

<style lang="less" scoped>
	.ul {
		.li {
			position: relative;
			height: 200rpx;
			margin: 30rpx;
			box-shadow: 0 0 6rpx #00002;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;

			.title {
				display: flex;
				justify-content: space-between;

				.name {
					font-weight: 600;
					font-size: 36rpx;
				}

				.money {
					font-weight: 700;
					color: #FD9509;
				}
			}

			.text {
				margin-top: 30rpx;
				width: 75%;
				height: 130rpx;
				overflow: auto;
			}

			.btn {
				width: 100rpx;
				height: 40rpx;
				border-radius: 40rpx;
				background-color: #fd9509;
				text-align: center;
				line-height: 40rpx;
				color: #fff;
				padding: 10rpx;
				position: absolute;
				bottom: 40rpx;
				right: 30rpx;
			}
		}
	}
</style>